<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-3.1.0.min.js"></script>
    <style type="text/css">
        ul,div{
            margin: 0;
            padding: 0;
            list-style: none;

        }
        li{
            float: left;
            background-color: mediumpurple;
            color: white;
            padding: 5px;
            margin-right: 2px;
            border: 1px solid white;
        }

        .tabin{
            background-color: blueviolet;
            border: 1px solid mediumpurple;
        }
        .contentfirst{
            clear: both;
            background-color: blue;
            color: white;
            width: 300px;
            height: 100px;
            padding: 10px;
            display: none;
        }
        .content{
            display: block;
        }
    </style>
</head>
<body>
    <ul id="tabfirst">
        <li class="tabin">标签1</li>
        <li>标签2</li>
        <li>标签3</li>
    </ul>
    <div class="content contentfirst">内容1</div>
    <div class="contentfirst">内容2</div>
    <div class="contentfirst">内容3</div>


<script>
    /*js完成切换,each()的功能是每碰到一个li元素就去改变他*/
    $(document).ready(function(){
        $("#tabfirst li").each(function(index){
            /*var liNode=$(this);  *//*最好给他付个值*/
            $(this).mouseover(function(){
                $("div.content").removeClass("content");
                $("#tabfirst li.tabin").remove("tabin");
                $("div").eq(index).addClass("content");  /*移到哪个给哪个加上class*/
                $(this).addClass("tabin");
            }).mouseout(function(){

            })
        })
    })
</script>
</body>
</html>